<template>
  <div>
    <el-collapse>
      <el-collapse-item title="参数设置">
        <el-button type="primary" @click="showAddParamDailog()" size="small"
          >添加参数<i class="el-icon-plus el-icon--right"></i
        ></el-button>
        <div style="height: 3px"></div>
        <div
          v-for="(item, index) in component.params"
          :key="index"
          class="demo-form-inline"
        >
          <el-descriptions
            class="margin-top"
            title=""
            direction="vertical"
            :column="3"
            size="small"
            border
          >
            <el-descriptions-item label="参数编码">
              {{ item.paramCode }}
            </el-descriptions-item>
            <el-descriptions-item label="参数名称">
              {{ item.paramName }}
            </el-descriptions-item>
            <el-descriptions-item label="操作">
              <el-button-group>
                <el-button
                  type="primary"
                  icon="icon-edit"
                  circle
                  size="small"
                  title="编辑"
                  @click="editParam(item,index)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="icon-delete"
                  circle
                  size="small"
                  title="删除"
                  @click="deleteParam(index)"
                ></el-button>
              </el-button-group>
            </el-descriptions-item>
            <template > </template>
          </el-descriptions>
          <div style="height: 3px"></div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      title="组件参数"
      v-model="isShowParamDialog"
      width="50%"
      height="80%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div class="el-dialog-div">
        <el-form
          :inline="true"
          :model="paramForm"
          class="demo-form-inline"
          ref="paramRef"
          size="small"
        >
          <el-form-item
            label="参数名称"
            prop="paramName"
            :rules="filter_rules('参数名称', { required: true })"
          >
            <el-input
              v-model="paramForm.paramName"
              placeholder="参数名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="参数编码"
            prop="paramCode"
            :rules="filter_rules('参数编码', { required: true })"
          >
            <el-input
              v-model="paramForm.paramCode"
              placeholder="参数编码"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="参数类型"
            prop="paramType"
            :rules="filter_rules('参数类型', { required: true })"
          >
            <el-select v-model="paramForm.paramType" placeholder="参数类型" style="width:150px">
              <el-option label="字符串/数值" value="varchar"></el-option>
              <el-option label="日期" value="date"></el-option>
              <el-option label="下拉单选" value="select"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认值">
            <el-input
              v-model="paramForm.paramDefault"
              placeholder="默认值"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否必填" prop="paramRequired" :rules="filter_rules('参数必填',{required:true})">
                          <el-select v-model="paramForm.paramRequired" placeholder="是否必填">
                              <el-option label="是" value="1"></el-option>
                              <el-option label="否" value="2"></el-option>
                          </el-select>
                          </el-form-item> -->
          <el-form-item
            label="是否隐藏"
            prop="paramHidden"
            :rules="filter_rules('是否隐藏', { required: true })"
          >
            <el-select v-model="paramForm.paramHidden" placeholder="是否隐藏"  style="width:150px">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="参数组件宽度"
            prop="width"
            :rules="
              filter_rules('参数组件宽度', { required: true, type: 'number' })
            "
          >
            <el-input v-model="paramForm.width" placeholder="参数组件宽度" size="small">
              <template #append>px</template>
            </el-input>
          </el-form-item>
          <el-form-item
            v-if="
              paramForm.paramType == 'select' ||
              paramForm.paramType == 'mutiselect'
            "
            label="选择内容来源"
            prop="selectType"
            :rules="filter_rules('选择内容来源', { required: true })"
            
          >
            <el-select
              v-model="paramForm.selectType"
              placeholder="选择内容来源"
              style="width:150px"
            >
              <el-option label="自定义" value="1"></el-option>
              <el-option label="sql语句" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="paramForm.selectType == '2'"
            label="选择数据源"
            prop="selectType"
            :rules="filter_rules('选择内容来源', { required: true })"
          >
            <el-select
              v-model="paramForm.dataSourceId"
              placeholder="选择数据源"
            >
              <el-option
                v-for="item in datasource"
                :key="item.id"
                :label="item.code"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              paramForm.paramType == 'select' ||
              paramForm.paramType == 'mutiselect'
            "
            label="下拉选择内容"
            prop="selectContent"
            :rules="filter_rules('下拉选择内容', { required: true })"
          >
            <el-input
              type="textarea"
              :cols="80"
              v-model="paramForm.selectContent"
              placeholder="下拉选择内容"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-tag v-show="paramForm.paramType == 'date'" type="primary"
              >注：当参数类型选择日期时，如果想让默认日期是当前日期，则默认值填写current或者CURRENT</el-tag
            >
            <el-tag v-show="paramForm.paramType == 'date'" type="primary"
              >如果想让默认日期是当前日期的天几天或者后几天，则填天数，例如前七天则填写-7，后七天则填写7。</el-tag
            >
            <el-tag v-show="paramForm.paramType == 'select'" type="primary"
              >自定义数据格式：[{"value":"value1","name":"name1"},{"value":"value2","name":"name2"}]
              注意：两个key必须是value 和 name</el-tag
            >
            <el-tag v-show="paramForm.paramType == 'select'" type="primary"
              >sql语句格式：select code as value, name as name from table
              注意：返回的属性中必须有 value 和 name</el-tag
            >
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span  class="dialog-footer">
        <el-button @click="closeDialog" size="small">取 消</el-button>
        <el-button type="primary" @click="addParam" size="small"
          >确 定</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    component: {
      type: Object,
      default: () => ({}),
    },
    chartsComponents: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    this.getReportDatasource();
  },
  data() {
    return {
      isShowParamDialog: false,
      paramForm: {
        paramName: "", //参数名称
        paramCode: "", //参数编码
        paramType: "", //参数类型
        paramDefault: "", //默认值
        paramRequired: "", //是否必选
        paramHidden: "", //是否隐藏
        selectContent: "", //下拉选择内容
        selectType: "", //内容来源
        width: "110", //参数组件宽度
        dataSourceId: "", //数据源
        selectData: null,
      },
      isEdit: false,
      editIndex: 0,
      datasource: [],
    };
  },
  methods: {
    showAddParamDailog() {
      this.isShowParamDialog = true;
    },
    addParam() {
      this.$refs["paramRef"].validate((valid) => {
        if (valid) {
          var key = this.paramForm.paramCode;
          var obj = {
            paramName: this.paramForm.paramName, //参数名称
            paramCode: this.paramForm.paramCode, //参数编码
            paramType: this.paramForm.paramType, //参数类型
            paramDefault: this.paramForm.paramDefault, //默认值
            paramRequired: this.paramForm.paramRequired, //是否必选
            selectContent: this.paramForm.selectContent, //下拉选择内容
            selectType: this.paramForm.selectType, //内容来源
            dataSourceId: this.paramForm.dataSourceId, //数据源
            width: this.paramForm.width, //参数组件宽度
            selectData: null, //下拉选择内容
          };
          var value = this.commonUtil.getDefaultValue(obj);
          obj[key] = value;

          if (this.component.params) {
            if (this.isEdit) {
              this.component.params[this.editIndex].paramName =
                this.paramForm.paramName;
              this.component.params[this.editIndex].paramCode =
                this.paramForm.paramCode;
              this.component.params[this.editIndex].paramType =
                this.paramForm.paramType;
              this.component.params[this.editIndex].paramDefault =
                this.paramForm.paramDefault;
              this.component.params[this.editIndex].paramRequired =
                this.paramForm.paramRequired;
              this.component.params[this.editIndex].paramHidden =
                this.paramForm.paramHidden;
              this.component.params[this.editIndex].selectContent =
                this.paramForm.selectContent;
              this.component.params[this.editIndex].selectType =
                this.paramForm.selectType;
              this.component.params[this.editIndex].width =
                this.paramForm.width;
              this.component.params[this.editIndex].dataSourceId =
                this.paramForm.dataSourceId;
              this.component.params[this.editIndex].selectData = null;
              this.component.params[this.editIndex][key] = value;
              if (this.component.params[this.editIndex].paramType == "select") {
                this.getSelectData(this.component.params[this.editIndex]);
              }
            } else {
              if (obj.paramType == "select") {
                this.getSelectData(obj);
              }
              this.component.params.push(obj);
            }
          } else {
            this.component.params = [];
            this.component.params.push(obj);
          }
          this.getHiddenParamSize();
          this.closeDialog();
        } else {
          return false;
        }
      });
    },
    closeDialog() {
      this.isShowParamDialog = false;
      this.paramForm.width = "110";
      this.isEdit = false;
      this.editIndex = 0;
      this.$refs["paramRef"].resetFields(); //校验重置
      this.commonUtil.clearObj(this.paramForm);
    },
    editParam(item, index) {
      this.isEdit = true;
      this.editIndex = index;
      this.paramForm.paramName = item.paramName;
      this.paramForm.paramCode = item.paramCode;
      this.paramForm.paramType = item.paramType;
      this.paramForm.paramDefault = item.paramDefault;
      this.paramForm.paramRequired = item.paramRequired;
      this.paramForm.paramHidden = item.paramHidden;
      this.paramForm.selectContent = item.selectContent;
      this.paramForm.selectType = item.selectType;
      this.paramForm.width = item.width;
      this.paramForm.dataSourceId = item.dataSourceId;
      this.getHiddenParamSize();
      this.showAddParamDailog();
    },
    deleteParam(index) {
      this.component.params.splice(index, 1);
      this.getHiddenParamSize();
    },
    //获取数据源
    getReportDatasource() {
      var obj = {
        params: { datasourceType: ["1", "2", "3", "5"] },
        url: this.apis.reportDatasource.getReportDatasourceApi,
      };
      this.commonUtil.doPost(obj).then((response) => {
        if (response.code == "200") {
          this.datasource = response.responseData;
        }
      });
    },
    getSelectData(obj) {
      if (obj.selectType == "1") {
        obj.selectData = eval(obj.selectContent)
      } else {
        var requestParam = {
          params: {
            dataSourceId: obj.dataSourceId,
            selectContent: obj.selectContent,
          },
          url: this.apis.reportDatasource.getDatasourceSelectDataApi,
        };
        this.commonUtil.doPost(requestParam).then((response) => {
          if (response.code == "200") {
             obj.selectData = eval(response.responseData)
          }
        });
      }
    },
    getHiddenParamSize(){
      if(this.component.params && this.component.params.length > 0){
        let size = 0;
        for (let index = 0; index < this.component.params.length; index++) {
          const element = this.component.params[index];
          if(element.paramHidden == 1){
              size = size + 1;
          }
        }
        this.component.hiddenParamSize = size;
      }else{
        this.component.hiddenParamSize = 0;
      }
    }
  },
};
</script>
<style scoped>
:deep(.el-input__inner),
:deep(.el-textarea__inner) {
  background-color: var(--colorWhite);
  color: var(--colorTextPrimary);
  border: 1px solid var(--borderColorBase);
}

:deep(.el-select-dropdown) {
   border: 1px solid var(--borderColorBase) !important;
   background-color: var(--colorWhite) !important;
 }

 :deep(.el-select__selected-item){
    color:var(--colorTextPrimary) !important;
  
}

:deep(.el-select--small .el-select__wrapper){
    background-color: var(--colorWhite) !important;
    box-shadow: 0 0 0 1px black inset;
}

:deep(.el-input--small .el-input__wrapper){
    /* padding: 0px 0px; */
    background-color: var(--colorWhite);
    box-shadow: 0 0 0 1px black inset;
}
</style>